<template>
  <div class='search-bar'>
    <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
      <el-form-item label="车牌号:">
        <el-input style="width:12rem" v-model="input" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left:55px" type="primary" @click="handleDownload">查询</el-button>
        <el-button style="margin-left:10px" @click="handleDownload">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="handleEdit">新增黑名单</el-button>
    <el-button @click="handleDownload">移除黑名单</el-button>
    <el-table style="margin-top: 20px;" v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
      highlight-current-row>
      <el-table-column align='center' type="selection" width="40">
      </el-table-column>
      <el-table-column label='车牌号' width='120' align='center'>
        <template slot-scope='scope'>
          <el-link type="primary" @click='handleEdit(scope.$index, scope.row)'>{{ scope.row.cheph }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label='黑名单来源' width='200' align='center'>
        <template slot-scope='scope'>
          <span>{{ scope.row.blacklist }}</span>
        </template>
      </el-table-column>
      <el-table-column label='原因' width='330' align='center'>
        <template slot-scope='scope'>
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at1' label='有效期起' width='200'>
        <template slot-scope='scope'>
          <span>{{ scope.row.startDateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name='status-col' label='有效期止' width='200' align='center'>
        <template slot-scope='scope'>
          <span>{{ scope.row.endDateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at' label='创建人' width='200'>
        <template slot-scope='scope'>
          <span>{{ scope.row.creater }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at' label='创建时间' width='300'>
        <template slot-scope='scope'>
          <i class='el-icon-time' />
          <span>{{ scope.row.CreateTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:15px;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize"
        layout=" prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>
    <el-dialog title="新增黑名单" :visible.sync="dialogFormVisible" width="30%">
      <el-form :label-width="labelWidth" :model="inputModel" :rules="rules" ref="inputModel">
        <el-form-item label="车牌号：" prop="cheph">
          <el-input v-model="dialogModel.name" style="width: 249px"></el-input>
        </el-form-item>
        <el-form-item label="黑名单期限" prop="resource">
          <el-radio-group v-model="dialogModel.resource">
            <el-radio label="1周"></el-radio>
            <el-radio label="1月"></el-radio>
            <el-radio label="1年"></el-radio>
            <el-radio label="永久"></el-radio>
            <el-radio label="自定义"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      input: "",
      listLoading: false,
      searchModel: {},
      dialogModel: {},
      labelWidth: "100px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 20,
      pageSize: 5,
      value2: '',
      dialogFormVisible: false,

      types: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },],
      list: [{
        cheph: '闽A12345',
        blacklist: '门卫科',
        remarks: '停车时间过长',
        startDateTime: '2021-12-23 00:00:00',
        endDateTime: '2021-12-24 00:00:00',
        creater: 'admin',
        CreateTime: '2022-10-22 08:50:08'
      }, {
        cheph: '闽A12543',
        blacklist: '门卫科',
        remarks: '非法闯入车辆',
        startDateTime: '2021-12-23 00:00:00',
        endDateTime: '2021-12-30 00:00:00',
        creater: 'admin',
        CreateTime: '2022-10-28 08:51:08'
      }],
    }
  },
  created() {
  },
  methods: {

    handleSizeChange(v) {
      // this.pageSize = v;
      // this.currentPage = 1;
      // this.getList();
    },
    handleCurrentChange(v) {
      // this.currentPage = v;
      // this.getList();
    },
    handleDownload() {

    },
    handleEdit() {
      this.dialogFormVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

#selectForm>>>.el-form-item__label {
  font-size: 12px;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  float: left;
  margin-left: 8rem;
  margin-top: 3rem;
}

.form-span {
  font-size: 18px;
  ;
}

.block {
  margin-left: 20px;
  margin-right: 2rem;
  float: right;
}

.move-right {
  margin-left: 5rem;
}
</style>
